<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-22 17:13:38
-->
<template>
  <div id="Left1_container" style="height: 95%"></div>
</template>
<script>
import { Line } from '@antv/g2plot';
export default  {
  methods:{
    initChart(){
      function getData() {
        // generate an array of random data
        const data = [];
        const time = new Date().getTime();

        for (let i = -19; i <= 0; i += 1) {
          data.push({
            x: time + i * 1000,
            y: Math.random() + 0.2,
          });
        }
        return data;
      }

      const line = new Line('Left1_container', {
        data: getData(),
        padding: 'auto',
        xField: 'x',
        yField: 'y',
        xAxis: {
          type: 'time',
          mask: 'HH:MM:ss',
        },
        smooth: true,
        point: {},
      });

      line.render();

      setInterval(() => {
        const x = new Date().getTime(), // current time
          y = Math.random() + 0.2;
        const newData = line.options.data.slice(1).concat({ x, y });
        line.changeData(newData);
      }, 1000);
    }
  },
  mounted() {
    this.initChart();
  },
}
</script>